<template>
  <div>
      <div id="banner">
          <img src="http://we.hzchuangxiangzhe.cn/assets/resource/image/purchase/icon_success@2x.png">
          <span class="vertical" style="marginLeft: .1rem">支付成功！</span>
      </div>
      <div style="padding: 0 .4rem; background: #fff;">
          <div class="order-item" v-for="(o,i) in orders" :key="i">
              <p class="c-txt">订单号：{{o.order_no}}</p>
              <p class="c-txt">你的包裹正整装待发，请耐心等待商品配送</p>
          </div>
      </div>
      <router-link class="c-btn highlight" to="/order/list?type=3" style="display:block; margin: 1.6rem auto;">查看订单</router-link>
  </div>
</template>

<script>
import { Indicator} from 'mint-ui'
import { handleHistory } from '@/assets/js/utils'
export default {
    name: 'paySuccess',
    // 这里有问题 后期要改。接口是由order_form_log_id获得订单号。
    // 然而待支付订单支付后没有order_form_log_id的 只有order_id
    async created(){
        handleHistory(this.$router, '/')
        Indicator.open()
        const id = this.$route.params.id
        const type = this.$route.query.type
        const orders =  await type == 1 ?
           this.$store.dispatch( 'order/getOrderNo', id) :
            {order_no: id}
        this.orders.push(orders)
        Indicator.close()
    },
    data(){
        return {
            orders: []
        }
    }
}
</script>

<style lang="less" scoped>
#banner{
    width: 10rem;
    height: 1.86rem;
    line-height: 1.86rem;
    background: #fb4a4a;
    color: #fff;
    font-size: .53rem;
    padding: 0 .4rem;
}
.order-item{
    width: 100%;
    height: 2.13rem;
    font-size: .37rem;
    border-bottom: 1px solid #d3d3d3;
    line-height: .7rem;
    padding-top: .3rem;
}
</style>

